<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>商品详情</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="js/layui/css/layui.css">
        <script src="js/layui/layui.js"></script>
        <link rel="stylesheet" href="css/swiper.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/detail.css">
        <style type="text/css">
          *{
        		padding: 0;
        		margin: 0;
        	}
        	.mian{
        		height: auto !important;
        	}
        	.tl-main-mar{
        		margin-bottom: 50px;
        	}
        	.tl-fixed{
        		position: fixed;
        		bottom: 0;
        		left: 0;
        		width: 100%;
        		box-sizing: border-box;
        	}
        	.tl-evaluation{
        		padding: 15px 12px;
        		
        	}
        	.tl-right{
        		text-align: right;
        	}
        	.tl-right span{
        		vertical-align: middle;
        	}
        	.tl-right span img{
        		vertical-align: 2px;
        		padding-left: 5px;
        	}
        	.tl-lefteval{
        		font-size: 13px;
        		color: #323232;
        		
        	}
        	.tl-lefteval span{
        		padding-left: 10px;
        	}
        	.tl-leftimg{
        		
        	}
        	.tl-leftimg img{
        		width: 40px;
        		height: 40px;
        		overflow: hidden;
        		border-radius: 50%;
        	}
        	.tl-newsleft{
        		/*padding-left: 8px;*/
        	}
        	.tl-newsleft span{
        		color: #909090;
        		font-size: 12px;
        	}
        	.tl-newsleft p{
        		color: #323232;
        		font-size: 16px;
        		margin-bottom: 2px;
        	}
        	.tl-data{
        		
        	}
        	.tl-evalcolor{
        		color: #909090;
        		font-size: 12px;
        	}
        	.tl-evalcolortop{
        		padding-top: 12px;
        	}
        	.tl-evalcontent{
        		font-size: 12px;
        		color: #323232;
        		line-height: 20px;
        		padding: 10px 0 0;
        	}
        	/*body{overflow: hidden;}*/
        	
        </style>
    </head>
    <body class="my">
       <div  class="mian layui-carousel layui-col-xs12 layui-col-sm12 layui-col-md12 tl-main-mar" id="app">
       	 <div class="layui-row tl-top">
		    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-leftalign">
		      <img src="img/img/icon_back.png"/>
		    </div>
		    <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 tl-align">
		      商品详情
		    </div>
		    <div class="layui-col-xs1 layui-col-sm1 layui-col-md1 tl-rightalign">
		      <img src="img/img/btn_share.png"/>
		    </div>
  		</div>
        <div class="cent">
            <div class="apple-banner">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide slide1">
                            <div class="title txt"> iPhone <br>
                                7  在此 </div>
                        </div>
                        <div class="swiper-slide slide2">
                            <div class="title txt"> <img src="img/logo_watch_large.png"> </div>
                            <h2 class="homepage-headline txt">Series 2 新登场。</h2>
                        </div>
                        <div class="swiper-slide slide3">
                            <div class="title txt"> <img src="img/logo_macbookpro_large.png">
                                <p> 一身才华，一触即发 </p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev"><span class="layui-icon nexIcon">&#xe602;</span></div>
                    <div class="swiper-button-next"><span class="layui-icon nexIcon">&#xe603;</span></div>
                    <ul class="swiper-pagination autoplay">
                    </ul>
                </div>
            </div>
                       
        </div>
		  <div class="layui-row layui-col-md12 tl-margin">
		    <div class="layui-col-md12 tl-font tl-clor">
		     	 卡哇伊水瓶座加水器你值得拥有
		    </div>
		    <div class="layui-col-md12 tl-integ">
		      	<span>4396</span><i>积分</i>
		    </div>
		    <div class="layui-col-md12">
            <div class="layui-col-xs9 layui-col-sm9 layui-col-md9">
              <div class="tl-clor tl-font12 tl-moeny">市场参考价:<i>123.00</i>元</div>
            </div>
            <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
              <div class="tl-font12 tl-stock">库存:<i>4390</i>个</div>
            </div>
          </div>
		</div>
		<div class="tl-bg"></div>
		 <div class="layui-row tl-margin">
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 tl-h3">
		      <h3 class="tl-clor tl-font16">商品描述</h3>
		    </div>
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 tl-font12 tl-stock tl-p">
		    	品名:<i>商量的卡拉卡拉迪卡龙</i>
		    </div>
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 tl-font12 tl-stock tl-p">
		    	品牌:<i>特步</i>
		    </div>
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 tl-font12 tl-stock tl-p">
	    		型号:<i>jd-12573</i>
		    </div>
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 tl-font12 tl-stock tl-p">
				颜色:<i>尊贵白</i>
		    </div>
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 tl-font12 tl-stock tl-p">
				重量:<i>净重140g 毛重150g</i>
		    </div>
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 tl-font12 tl-stock tl-p">
				等级:<i>优</i>
		    </div>
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 tl-font12 tl-stock tl-p">
				材质:<i>abs-12152</i>
		    </div>
		    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 tl-font12 tl-stock tl-p">
				尺寸:<i>98*98*43mm</i>
		    </div>
   		</div>
   		<div class="tl-bg"></div>
   		 <div class="layui-row tl-evaluation">
   		 	<div class="layui-row">
			    <div class="layui-col-xs4 layui-col-sm6 layui-col-md4 tl-lefteval">
			      	商品评价<span>(132)</span>
			    </div>
			    <div class="layui-col-xs4 layui-col-xs-offset4 layui-col-sm6 layui-col-md4 tl-right">
			      查看全部评价<span><img src="img/img/icon_enter.png"/></span>
			    </div>
		    </div>
		    <div class="layui-row tl-evalcolortop">
			    <div class="layui-col-xs2 layui-col-sm2 layui-col-md2 tl-leftimg">
			      <img src="img/img/icon_detail_bonus.png"/>
			    </div>
			    <div class="layui-col-xs10 layui-col-sm10 layui-col-md10 tl-newsleft">
			      	<p>赵越</p>
			      	<span class="tl-data">2017-12-12</span>
			      	<span class="tl-evalcolor">颜色:<i>尊贵白</i></span>
			    </div>
		  </div>
		  <div class="layui-row tl-evalcontent">
				的卡上的克拉斯打开了大家快来撒角度看沙路口多亏了撒娇的卡经典款拉拉手机端看啦啥离开家萨迪克两三点			      
		  </div>
  		</div>
  		<div class="tl-bg"></div>
   		<div class="layui-col-md12 tl-center">
			<img src="img/logo_watch_large.png"/>
	    </div>
	    <div class="layui-col-md12 tl-center">
			<img src="img/logo_watch_large.png"/>
	    </div>
	    <div class="layui-col-md12 tl-center">
			<img src="img/logo_watch_large.png"/>
	    </div>
			   <div class="layui-row tl-exchange tl-fixed" style='padding-top: 0;padding-bottom: 0;'>
				   <div class="layui-col-xs8 layui-col-sm8 layui-col-md8 tl-leftdiv tl-integ">
					   单价:
					   <span class="ti-mun">4290</span>
					   <i class="tl-tegral">积分</i>
				   </div>
				   <div class="layui-col-xs4 layui-col-sm4 layui-col-md4 tl-text">
					   <button class="layui-btn tl-change">立即兑换</button>
				   </div>
			   </div>
	    
  	</div>
  	
    </div>
   
    <script src="js/swiper.min.js"></script>
    <script src="js/apple.js"></script>
        <script>
            layui.use(['carousel', 'form'], function(){
                var layer = layui.layer,
                 carousel = layui.carousel,
                    form = layui.form;
                layer.msg('开始我们的代码开发');
                carousel.render({
                    elem: '#test1',
                    arrow: 'always',
                    width: '100%',
                    height: '200px'
                });
            });
        </script>
    </body>
</html>
